<template>
  <div id="rank-page">
    <h1>排行榜</h1>
    <div class="thread"></div>
    <div id="container">
      <div class="option-panel">
        <ul>
          <li
            v-for="(item, index) in genres"
            :key="index"
            :class="{ mark: index === isMark || isSelected === item.id }"
            @mouseenter="isMark = index"
            @mouseleave="isMark = -100"
            @click="
              () => {
                initRank(1, item.id)
                isSelected = item.id
              }
            "
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="rank-panel">
        <div>
          <RankItem
            v-for="(item, index) in songs?.records"
            :key="index"
            :songsVO="item"
          ></RankItem>
        </div>
        <div class="page">
          <el-pagination
            layout="prev, pager, next"
            v-model:current-page="currentPage"
            @update:current-page="initRank(currentPage)"
            :total="songs?.total"
            :size="'large'"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from 'vue'
import { getGeneAPI, getSongsListAPI } from '@/services/songService.ts'
import type { GenreDTO, PageDTO, SongsPageDTO, SongsPageInfo } from '@/types/song'
import type { UnifyResponse } from '@/types/result'
import { SortBy, SortOrder } from '@/utils/common/enum.ts'
import RankItem from '@components/RankItem.vue'

const genres = ref<GenreDTO[]>([])
const songs = ref<PageDTO<SongsPageDTO[]> | null>()
const isMark = ref<number>(-100)
const currentPage = ref<number>()
const isSelected = ref<number>(-1)

const initGenre = async () => {
  try {
    const res: UnifyResponse<GenreDTO[]> = await getGeneAPI()
    genres.value = res.data || []
    genres.value.unshift({ id: -1, name: '全部' })
  } catch (error) {
    console.log(error)
  }
}

const initRank = async (page?: number, genreId?: number) => {
  try {
    const songsPageInfo: SongsPageInfo = {
      page: page || 1,
      size: 10,
      sortBy: SortBy.COUNT,
      sortOrder: SortOrder.DESC,
    }
    if (genreId !== undefined) {
      songsPageInfo.genreId = genreId
    }
    const res: UnifyResponse<PageDTO<SongsPageDTO[]>> = await getSongsListAPI(songsPageInfo)
    songs.value = res.data || null
  } catch (e) {
    console.error(e)
  }
}

onBeforeMount(async () => {
  await initGenre()
  await initRank()
})
</script>

<style scoped>
#rank-page {
  width: 60rem;
  height: 60rem;
  margin: 1em auto 0;
  background-color: rgb(219, 255, 233, 0.6);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
}

h1 {
  text-align: center;
  height: 3em;
  line-height: 3em;
}

.thread {
  height: 0.5em;
  background-color: rgba(87, 156, 255, 0.5);
}

#container {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
}

.option-panel {
  width: 15em;
}

ul {
  width: 100%;
  margin-top: 1em;
  border-right: 0.4em solid rgba(87, 156, 255, 0.5);
}

li {
  height: 3em;
  line-height: 3em;
  text-align: center;
  margin-bottom: 0.5em;
}

.mark {
  background-color: rgb(255, 255, 255, 0.5);
  cursor: pointer;
}

.rank-panel {
  margin-top: 1em;
  padding: 0 1em;
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.page {
  margin: 2em auto;
}

.page:deep(.el-pagination button) {
  background-color: transparent;
}

.page:deep(.el-pager li) {
  background-color: transparent;
}
</style>
